<template>
    <!-- 发现页面 -->
    <div class="discoverBox">
        <!-- 菜单 -->
        <div class="navTabBox flex">
            <tab class="menus" active-color="#3499ff">
                <tab-item
                        class="menu"
                        v-for="(item, index) in categoryList"
                        :selected="menuIndex==index"
                        :key="item.id"
                        @on-item-click="tabClike(item.id,index)"
                >
                    <div class="menuIcon">
                        <img src="../assets/images/defaultMenu.png" alt class="buyCourse"/>
                    </div>
                    <span>{{item.name}}</span>
                </tab-item>
            </tab>
            <div class="filterBox" :class="filterStatus? 'afterColor':'beforeColor'" @click="moreClick">更多</div>
        </div>
        <!-- 筛选菜单 -->
        <div v-show="filterStatus" ref="filterPage" class="filterMask" @touchmove.prevent></div>
        <div v-if="filterStatus" class="popFilter">
            <div class="filterTitle">课程筛选</div>
            <div class="filterLabels">
                <div
                        v-for="(item, index) in categoryList"
                        :key="index"
                        class="filterLabel"
                        @click="onFilterLabel(item.id,index)"
                >{{item.name}}
                </div>
            </div>
        </div>
        <!-- 内容板块 -->
        <div class="listContentBox">
            <!--      v-for="(item, index) in listContent" :key="index"-->
            <div>
                <!--        v-if="item.title=='推荐'&&tabIndex==index"-->
                <ul class="recommendBox clearfix">
                    <li v-for="(item2, index2) in listContent" :key="index2">
                        <router-link to>
                            <!--                            :to="{name:'courseDetails-noBuy',query:{id:item2.id}}"-->
                            <a href>
                                <div class="item-ans" @click="hreftwo(item2.id)">
                                    <div class="courseImg" v-if="item2.largePicture !=''">
                                        <img class="img" :src="item2.largePicture"/>
                                    </div>
                                    <div class="courseImg" v-if="item2.largePicture ==''">
                                        <img class="img" src="../assets/images/courseSet.png"/>
                                    </div>

                                    <div class="hotCourseInfo">
                                        <div class="hotCourseInfo_title">{{item2.title}}</div>
                                        <div class="hotCourseInfo_count">
                                            {{item2.lessonNum}}课时 |
                                            {{item2.studentNum}}人学过
                                        </div>
                                        <div class="mt_35">
                                            <span class="price_now">￥{{item2.price/100}}</span>
                                            <span
                                                    class="price_now tags"
                                                    v-if="item2.vipLevelName !=''"
                                            >{{item2.vipLevelName}}</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
        <TabBar></TabBar>
    </div>
</template>

<script>
    import TabBar from '../components/tabBar'
    import {Tab, TabItem, Scroller, XDialog} from 'vux'
    import {
        allCourseList,
        infoList,
        parentCategoryList,
        parentCourseList,
        userInfo
    } from '@/api/index/index'
    import {confirmCourse} from '@/api/index/study'
    import store from '../store/store'

    export default {
        components: {
            Tab,
            TabItem,
            TabBar,
            TabBar,
            Scroller,
            XDialog
        },
        data() {
            return {
                listContent: [],
                menuIndex: 0,
                tabID: '',
                tabId: 0,
                tabIndex: 0,
                showToast: false,
                toastObj: '',
                vipInfo: '',
                filterStatus: false,
                categoryList: [
                    '全部',
                    '建档',
                    '促排',
                    '取卵',
                    '移植',
                    '保胎',
                    '全部',
                    '建档',
                    '促排',
                    '取卵',
                    '移植',
                    '保胎'
                ]
            }
        },
        watch: {
            menuIndex(newValue, oldValue) {
                return this.menuIndex
            }
        },
        mounted() {
            if (this.$route.query.id == undefined) {
                this.menuIndex = 0
                this.tabId = 0
            } else {
                this.tabId = this.$route.query.id
                setTimeout(() => {
                    this.menuIndex = this.$route.query.index
                    console.log('nextTick' + this.menuIndex)
                }, 200)
            }

            if (this.$store.state.user.tenantId == '') {
                var tenantId = '4ZMNZFG4CM'
            } else {
                var tenantId = this.$store.state.user.tenantId
            }
            parentCategoryList(tenantId, 'course')
                .then(res => {
                    this.categoryList = res.data.data.categorys
                })
                .catch(err => {
                    console.log(err)
                })

            console.log('this.tabId' + this.tabId)
            parentCourseList(this.tabId, tenantId)
                .then(res => {
                    this.listContent = res.data.data.list
                })
                .catch(err => {
                    console.log(err)
                })
            this.getTabInfo()
            this.getFilterHeight()
        },
        methods: {
            hreftwo(id) {
                console.log(this.$store.state.user.id)

                if (this.$store.state.user.id == '') {
                    this.$router.push({name: 'courseDetails-noBuy', query: {id: id}})
                } else {
                    userInfo(this.$store.state.user.id).then(res => {
                        console.log(res.data.data)
                        this.vipInfo = res.data.data.vipInfo
                    }).catch(err => {
                        console.log(err)
                    })

                    confirmCourse(this.$store.state.user.id, id).then(res => {
                        console.log(res.data.data)
                        if (res.data.data.members == 'true' || res.data.data.courseInfo.price == 0) {
                            if (res.data.data.courseInfo.type == 'live') {
                                this.$router.push({name: 'courseDetails-buy-live', query: {id: id}})
                            } else {
                                this.$router.push({name: 'courseDetails-buy', query: {id: id}})
                            }
                        } else if (res.data.data.members == 'false') {
                            //判断用户会员等级是否大于课程等级
                            console.log(this.vipInfo.sortField)
                            console.log(res.data.data.courseInfo.vipLevelId)
                            if (this.vipInfo.sortField >= res.data.data.courseInfo.vipLevelId) {
                                if (res.data.data.courseInfo.type == 'live') {
                                    this.$router.push({name: 'courseDetails-buy-live', query: {id: id}})
                                } else {
                                    this.$router.push({name: 'courseDetails-buy', query: {id: id}})
                                }
                            } else {
                                this.$router.push({
                                    name: 'courseDetails-noBuy',
                                    query: {id: id}
                                })
                            }
                        }
                    })
                        .catch(err => {
                            console.log(err)
                        })
                }
            },

            /***滑动限制***/
            stop() {
                var mo = function (e) {
                    e.preventDefault()
                }
                document.body.style.overflow = 'hidden'
                document.addEventListener('touchmove', mo, false) //禁止页面滑动
            },
            /***取消滑动限制***/
            move() {
                var mo = function (e) {
                    e.preventDefault()
                }
                document.body.style.overflow = '' //出现滚动条
                document.removeEventListener('touchmove', mo, false)
            },
            tabClike(id, index) {
                this.menuIndex = index
                this.tabId = id
                this.getTabInfo()
            },
            // tab列表
            getTabInfo() {
                if (this.tabId == '') {
                    this.tabId = 0
                }
                if (this.$store.state.user.tenantId == '') {
                    var tenantId = '4ZMNZFG4CM'
                } else {
                    var tenantId = this.$store.state.user.tenantId
                }
                parentCourseList(this.tabId, tenantId)
                    .then(res => {
                        this.listContent = res.data.data.list
                        console.log(this.listContent)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },

            joinPop(item) {
                console.log(item)

                this.showToast = !this.showToast
                this.toastObj = item
            },
            getFilterHeight() {
                let topHeight = document.getElementsByClassName('navTabBox')[0]
                    .offsetHeight
                let bottomHeight = document.getElementsByClassName('tabbarBox')[0]
                        .offsetTop,
                    diffHeight = window.screen.height - bottomHeight - topHeight
                this.$nextTick(() => {
                    this.$refs.filterPage.style.top = topHeight + 'px'
                    this.$refs.filterPage.style.height = diffHeight + 'px'
                })
            },
            moreClick() {
                this.filterStatus = !this.filterStatus
                if (this.filterStatus) {
                    this.stop()
                } else {
                    this.move()
                }
            },
            onFilterLabel(id, index) {
                this.move()
                this.filterStatus = !this.filterStatus
                this.menuIndex = index
                this.tabId = id
                this.getTabInfo()
            }
        }
    }
</script>

<style lang="less" scoped>
    .discoverBox {
        padding-bottom: 100px;
        /*菜单 */

        .navTabBox {
            width: 100%;

            .menus {
                padding: 0 10px;
                flex-grow: 1;

                &.vux-tab-wrap {
                    height: 120px;
                }

                /deep/ .vux-tab-container {
                    height: 120px;

                    .vux-tab {
                        height: 120px;

                        .vux-tab-item {
                            line-height: 1.1;
                        }
                    }
                }

                .menu {
                    width: 20%;
                    display: inline-block;
                    text-align: center;
                    padding-top: 20px;
                    position: relative;

                    .menuIcon {
                        height: 52px;
                        line-height: 52px;

                        img {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    span {
                        font-size: 30px;
                    }
                }
            }

            .filterBox {
                height: 119px;
                flex-shrink: 0;
                width: 10%;
                box-shadow: -10px 0 10px #f3f3f3;
                font-size: 24px;
                line-height: 119px;
                text-align: center;
                border-bottom: 1px solid #e9e9e9;
                z-index: 1;

                .filter {
                    width: 22px;
                    height: 22px;
                    vertical-align: middle;
                }
            }

            .beforeColor {
                color: #2f97ff;
                background: #fff;
            }

            .afterColor {
                color: #fff;
                background: #2f97ff;
            }
        }

        /* 筛选按钮 */

        .filterMask {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2;
        }

        .popFilter {
            position: absolute;
            left: 0;
            right: 0;
            background: #fff;
            z-index: 2;
            padding: 20px 30px;

            .filterTitle {
                font-size: 26px;
                color: #626262;
            }

            .filterLabels {
                display: flex;
                margin-top: 20px;
                flex-wrap: wrap;
            }

            .filterLabel {
                background: #f1f1f1;
                font-size: 26px;
                color: #626262;
                margin-right: 20px;
                margin-bottom: 20px;
                width: 156px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;

                &:nth-child(4n) {
                    margin-right: 0;
                }
            }
        }

        // 广告图
        .bannerBox {
            display: flex;
            align-content: center;
            overflow-x: auto;
            padding: 20px;

            .bannerItem {
                flex-shrink: 0;
                width: 80%;
                background-color: #ccc;
                margin-right: 40px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        // tab导航
        /deep/ .navTabList {
            padding: 0 20px;
            border-bottom: 20px solid #f8f9fa;

            .vux-tab-wrap {
                padding-top: 70px;
            }

            .vux-tab-container {
                height: 60px;

                .vux-tab {
                    height: 60px;

                    .vux-tab-item {
                        height: 60px;
                        line-height: 60px;
                        background-size: 100% 0px;
                    }

                    .vux-tab-item.vux-tab-selected {
                        color: #fff !important;
                        z-index: 1;
                    }

                    /deep/ .vux-tab-ink-bar {
                        height: 60px !important;
                        border-radius: 40px;
                    }
                }
            }
        }

        // 内容板块
        .listContentBox {
            overflow-y: auto;

            .recommendBox {
                margin: 0;
                list-style: none;

                li {
                    a {
                        color: currentColor;

                        .item-ans {
                            width: 100%;
                            display: flex;
                            padding: 20px;
                            box-sizing: border-box;

                            .courseImg {
                                img {
                                    width: 312px;
                                    height: 182px;
                                    display: block;
                                }
                            }

                            .hotCourseInfo {
                                margin-left: 30px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .hotCourseInfo_title {
                                    font-size: 30px;
                                }

                                .hotCourseInfo_count {
                                    font-size: 24px;
                                    color: #9d9d9d;
                                    margin-top: 10px;
                                }

                                .price_now {
                                    color: #f14927;
                                    font-size: 36px;
                                }

                                .tags {
                                    margin-left: 20px;
                                    font-size: 24px;
                                    border: 2px solid #f98e48;
                                    padding: 0 8px;
                                    border-radius: 20px;
                                }

                                .price_before {
                                    font-size: 22px;
                                    color: #a5a5a5;
                                    text-decoration: line-through;
                                }

                                .hotCourseInfo_tips {
                                    font-size: 24px;
                                    color: #b48a59;
                                    margin-left: 24px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>